import { div } from "three/examples/jsm/nodes/Nodes.js";
import "./App.scss";
import Header from "./components/Header";
import { useState } from "react";
import avatar from "./images/bozai.png";
import orderBy from "lodash/orderBy";
import CommentSection from "./components/Bottom";
/**
 * 评论列表的渲染和操作
 *
 * 1. 根据状态渲染评论列表
 * 2. 删除评论
 * 3. 喜欢和不喜欢
 */

// 评论列表数据
const defaultList = [
  {
    // 评论id
    rpid: 3,
    // 用户信息
    user: {
      uid: "13258165",
      avatar:
        "https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/reactbase/comment/zhoujielun.jpeg",
      uname: "周杰伦",
    },
    // 评论内容
    content: "哎哟，不错哦",
    // 评论时间
    ctime: "10-18 08:15",
    // 喜欢数量
    like: 98,
    // 0：未表态 1: 喜欢 2: 不喜欢
    action: 0,
  },
  {
    rpid: 2,
    user: {
      uid: "36080105",
      avatar:
        "https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/reactbase/comment/xusong.jpeg",
      uname: "许嵩",
    },
    content: "我寻你千百度 日出到迟暮",
    ctime: "11-13 11:29",
    like: 88,
    action: 2,
  },
  {
    rpid: 1,
    user: {
      uid: "30009257",
      avatar,
      uname: "黑马前端",
    },
    content: "学前端就来黑马",
    ctime: "10-19 09:00",
    like: 66,
    action: 1,
  },
];

// 当前登录用户信息
const user = {
  // 用户id
  uid: "30009257",
  // 用户头像
  avatar,
  // 用户昵称
  uname: "黑马前端",
};

/**
 * 导航 Tab 的渲染和操作
 *
 * 1. 渲染导航 Tab 和高亮
 * 2. 评论列表排序
 *  最热 => 喜欢数量降序
 *  最新 => 创建时间降序
 */

// 导航 Tab 数组
const tabs = [
  { type: "hot", text: "最热" },
  { type: "time", text: "最新" },
];

const App = () => {
  const [activeTab, setActiveTab] = useState("hot");
  const [list, setList] = useState(defaultList);

  // tab 高亮切换
  const onToggle = (type) => {
    setActiveTab(type);

    let newList;
    if (type === "time") {
      // 按照时间降序排序
      // orderBy(对谁进行排序, 按照谁来排, 顺序)
      newList = orderBy(list, "ctime", "desc");
    } else {
      // 按照喜欢数量降序排序
      newList = orderBy(list, "like", "desc");
    }
    setList(newList);
  };
  return <CommentSection />;
  //   return (
  //     <div className="app">
  //       {/* { 导航tab} */}
  //       <div className="reply-navigation">
  //         <ul className="nav-bar">
  //           <li className="nav-title">
  //             <span className="nav-title-text">评论</span>
  //             <span className="total-reply">{list.length}</span>
  //           </li>
  //           <li className="nav-sort">
  //             {/* 高亮类名： active */}
  //             {tabs.map((item) => {
  //               return (
  //                 <div
  //                   key={item.type}
  //                   className={
  //                     item.type === activeTab ? "nav-item active" : "nav-item"
  //                   }
  //                   onClick={() => onToggle(item.type)}
  //                 >
  //                   {item.text}
  //                 </div>
  //               );
  //             })}
  //           </li>
  //         </ul>
  //       </div>
  //       <div className="reply-wrap">
  //         {/* 发表评论 */}
  //         <div className="box-normal">
  //           {/* 当前用户头像 */}
  //           <div className="reply-box-avatar">
  //             <div className="bili-avatar">
  //               <img className="bili-avatar-img" src={avatar} alt="用户头像" />
  //             </div>
  //           </div>
  //           <div className="reply-box-wrap">
  //             {/* 评论框 */}
  //             <textarea
  //               className="reply-box-textarea"
  //               placeholder="发一条友善的评论"
  //             />
  //             {/* 发布按钮 */}
  //             <div className="reply-box-send">
  //               <div className="send-text">发布</div>
  //             </div>
  //           </div>
  //         </div>
  //       </div>
  //       <CommentSection />
  //     </div>
  //   );
};

export default App;
